import React, { Component } from "react";

import Modal from "./Modal";

class App extends Component {
  state = {
    show: false,
  };

  open = () => {
    this.setState({
      show: true,
    });
  };

  close = () => {
    this.setState({
      show: false,
    });
  };

  fn = () => {
    console.log("wrap click");
  };

  render() {
    return (
      <div className="wrap" onClick={this.fn}>
        <h2>portal对话框</h2>
        <button onClick={this.open}>打开对话框</button>
        {/* {this.state.show && <Modal />} */}
        {/* 为了更接近组件库的写法，变量都要用自定义属性的方式传入 */}

        {/* portal可以让我们的元素在别处渲染，但是冒泡的机制还是原来的位置 */}
        <Modal
          visible={this.state.show}
          title={<span>新增商品</span>}
          onOk={this.close}
          onCancel={this.close}
          okText="添加"
          width="500"
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }
}

export default App;
